<template>
  <div class="app-container campContainer campManage">
    <BreadCrumb :typeFu="1" :statusFu="3" :campName="formData.name"></BreadCrumb>

    <div class="header_btn">
      <el-button
        type="text"
        :class="{'is-active': activeName==1}"
        @click="handleClick({name:'1'})"
        v-hasPermi="['campSystem:campManager:update']">修改设置
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==2}"
        v-hasPermi="['campSystem:campManager:signup']"
        @click="handleClick({name:'2'})">查看报名(个人)
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==3}"
        v-if="formData.auditIndividualInformation==1"
        v-hasPermi="['campSystem:campManager:check']"
        @click="handleClick({name:'3'})">审核资料
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==4}"
        v-if="formData.fillIndividualInvitationcode==1"
        v-hasPermi="['campSystem:campManager:invite']"
        @click="handleClick({name:'4'})">邀请码管理
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==5}"
        v-hasPermi="['campSystem:campManager:agency:list']"
        @click="handleClick({name:'5'})">经销商管理
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==6}"
        @click="handleClick({name:'6'})">作业管理
      </el-button>
      <el-button
        type="text"
        :class="{'is-active': activeName==7}"
        @click="handleClick({name:'7'})">消息通知
      </el-button>
    </div>

    <el-tabs v-model="activeName" @tab-click="handleClick">
      <el-tab-pane
        label="修改设置"
        name="1" v-hasPermi="['campSystem:campManager:update']">
        <div v-show="activeName==1">
          <camp-form :isEdit="true" :formDataFu="formData"></camp-form>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="查看报名(个人)"
        name="2"
        v-hasPermi="['campSystem:campManager:signup']">
        <div v-if="activeName==2">
          <sign-up-info :idFu="campId"></sign-up-info>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="审核资料"
        name="3"
        v-if="formData.auditIndividualInformation==1"
        v-hasPermi="['campSystem:campManager:check']">
        <div v-if="activeName==3">
          <check-index :idFu="campId"></check-index>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="邀请码管理"
        name="4"
        v-if="formData.fillIndividualInvitationcode==1"
        v-hasPermi="['campSystem:campManager:invite']">
        <div v-if="activeName==4">
          <invitation-code :idFu="campId"></invitation-code>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="经销商管理"
        name="5"
        v-hasPermi="['campSystem:campManager:agency:list']">
        <div v-if="activeName==5">
          <agency-list :idFu="campId"></agency-list>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="作业管理"
        name="6">
        <div v-if="activeName==6">
          <job-index :idFu="campId"></job-index>
        </div>
      </el-tab-pane>
      <el-tab-pane
        label="消息通知"
        name="7">
        <div v-if="activeName==7">
          <msg-notice :idFu="campId"></msg-notice>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script>
  import {GetCampInfo} from "@/api/campSystem/campOper";

  import BreadCrumb from "@/components/CampSystem/CampOper/BreadCrumb";
  import CampForm from "@/components/CampSystem/CampOper/CampForm";
  import SignUpInfo from "@/components/CampSystem/CampOper/SignUpInfo";
  import CheckIndex from "@/components/CampSystem/CampOper/Check/CheckIndex";
  import InvitationCode from "@/components/CampSystem/CampOper/InvitationCode";
  import AgencyList from "@/components/CampSystem/CampOper/Agency/AgencyList";
  import JobIndex from "@/components/CampSystem/CampOper/JobManage/JobIndex";
  import MsgNotice from "@/components/CampSystem/CampOper/MsgNotice/Index";


  export default {
    name: "campManage",
    components: {
      BreadCrumb,
      CampForm,
      SignUpInfo,
      CheckIndex,
      InvitationCode,
      AgencyList,
      JobIndex,
      MsgNotice
    },
    data() {
      return {
        loading: false,
        formData: {},
        activeName: '1', // tabs绑定数字
        campId: null,// 营地id
      };
    },
    created() {
      this.campId = this.$route.query.id;
      this.activeName = this.$route.query.active;
      this.getCampInfo();
    },
    methods: {
      handleClick(tab) {
        const that = this;
        that.activeName = tab.name;
        if(tab.name == 6){
          that.$router.push({query: {id: this.campId, active: tab.name, type: '1'}});
        }else{
          that.$router.push({query: {id: this.campId, active: tab.name}});
        }
      },
      // 获取指定id的营地的详情
      getCampInfo() {
        this.loading = true;
        GetCampInfo(this.campId)
          .then(response => {
            console.log(response);
            if (response.code != 200) {
              this.loading = false;
              return this.msgError(response.msg);
            }
            this.formData = response.data;
          })
          .catch(error => {
            console.log(error);
            this.loading = false;
          });
      },
    },
    watch: {
      '$route': {
        handler(val) {
          const that = this;
          if (val.name == 'campManage') {
            if (that.campId != val.query.id) {
              that.campId = val.query.id;
              that.getCampInfo();
            }
            if (that.activeName != val.query.active) {
              that.activeName = val.query.active;
            }
          }
        },
        deep: true
      }
    }
  }
</script>

<style lang="scss">
  @import "@/assets/styles/card.scss";
  @import "@/assets/styles/campCommon.scss";

  .campManage {
    height: 100%;
    display: flex;
    flex-flow: column;

    .header_btn {
      height: 60px;
      background-color: #ffffff;
      padding: 5px 30px;
      margin: 20px 0;
      box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
      border-radius: 4px;

      .el-button {
        height: 50px;
        line-height: 50px;
        padding: 0 5px;
        margin: 0 30px 0 0;
        color: #303133;
        border: 0;
        border-radius: 0;

        &:hover {
          color: #1890ff;
        }

        &.is-active {
          color: #1890ff;
          border-bottom: 2px solid #1890ff;
        }
      }
    }

    .el-tabs {
      flex: 1;
      display: flex;
      flex-flow: column;
      overflow: hidden;
      /*margin-top: 20px;*/

      .el-tabs__header {
        padding: 5px 30px;
        margin-bottom: 20px;
        background-color: #ffffff;
        box-shadow: 0 2px 12px 0 rgb(0 0 0 / 10%);
        border-radius: 4px;
        display: none;

        .el-tabs__nav-wrap::after {
          height: 0;
        }

        .el-tabs__active-bar {
          height: 0;
        }

        .el-tabs__item {
          height: 50px;
          line-height: 50px;
          padding: 0 5px;
          margin: 0 30px 0 0;

          &:nth-child(1) {
            margin: 0 !important;
          }

          &.is-active {
            color: #1890ff;
            border-bottom: 2px solid #1890ff;
          }
        }
      }

      .el-tabs__content {
        overflow: auto;
      }
    }
  }
</style>


